<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>Title</title>
    <link href="/dev/views/slx/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="/dev/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/dev/views/slx/css/nav.css">
    <link rel="stylesheet" href="/dev/views/slx/css/search.css">
    <link rel="stylesheet" href="/dev/views/slx/css/index.css">
    <link rel="stylesheet" href="/dev/views/cxy/css/playerto.css">

</head>
<body>
<div id="app"></div>
<!--播放器-->
<div id="QPlayer">
    <div id="pContent">

        <div id="player">
            <span class="cover"></span>
            <div class="ctrl">
                <div class="musicTag marquee">
                    <strong>Title</strong>
                    <span> - </span>
                    <span class="artist">Artist</span>
                </div>
                <div class="progress">
                    <div class="timer left">0:00</div>
                    <div class="contr">
                        <div class="rewind icon"></div>
                        <div class="playback icon"></div>
                        <div class="fastforward icon"></div>
                    </div>
                    <div class="right">
                        <div class="liebiao icon"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ssBtn" style="background:#000 none repeat scroll 0% 0%">
            <div class="adf"></div>
        </div>
    </div>
    <ol id="playlist"></ol>
</div>
<!---->
<div class="mainWrap" style="height: auto">
    <div class="main" style="position: relative">
        <div class="search" style="position: absolute; height: 30px">
            <div style="padding: 30px 100px 10px;">
                <form class="bs-example bs-example-form" role="form"
                      style="    margin-left: 130px;height: 34px;width: 500px;">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="search">
                                <span class="input-group-btn" style="width: 27%;">
                        <button class="btn btn-default" type="button" onclick="search1()">🔍</button>
                    </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </form>
            </div>
            <div class="m_search" style="margin: 12px 85px 15px 41px;">
                <div class="snote " id="ss" style="display: block;margin-left: 222px"></div>

                <ul class="tabs tabs-srch" id="data" style="margin-bottom: auto;margin-left: 87px">
                    <li class="fst" onclick="ss()">
                        <a href="javascript:;" class="zs active" data-cont="l1"><em>单曲</em></a>
                    </li>

                </ul>
                <section class="cont" id="l1" style="display:block">
                </section>
            </div>
            <div id="demo-laypage-all" style="    margin-left: 78px;"></div>
        </div>

    </div>
</div>
<button onclick="topf()" class="gotop" id="topbtn" title="回顶部" style=" margin-left: 396px;">回到顶部</button>
<div class="foot">
    <div class="copy">
        <p class="link" id="music-link">
            <a href="#" class="item sf">服务条款</a>
            <span class="line">|</span>
            <a href="#" class="item sf">隐私政策</a>
            <span class="line">|</span>
            <a href="#" class="item sf">儿童隐私政策</a>
            <span class="line">|</span>
            <a href="#" class="item sf">版权投诉</a>
            <span class="line">|</span>
            <a href="#" class="item sf">广告合作</a>
            <span class="line">|</span>
            <a href="#" class="item sf">联系我们</a>
            <span class="line">|</span>
        </p>
    </div>
</div>
<script src="/dev/plugins/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="/dev/views/slx/layui/layui.js"></script>
<script src="/dev/views/cxy/js/xiaobofang/jquery.marquee.min.js"></script>
<script>

    // 	var	playlist = [
    // // {title:name,artist:"gname",mp3:"/dev/views/cxy/music/"+name+".mp3",cover:"/dev/views/cxy/music/img/" + img,},
    // {title:"Uptown Funk",artist:"Mark Ronson",mp3:"jq22-1.mp3",cover:"t2.png",},
    // ];
    var time = localStorage.getItem('time');
    // if (time!=null)
    // {

    // }
    // if (time!=0)
    // {
    // 	var isRotate = true;
    // 	var autoplay = true;
    // 	console.log("000")
    // }

    var timet = Math.round(time)
    console.log(timet)
    if (timet != 0) {
        var isRotate = true;
        var autoplay = false;

    } else {
        var isRotate = true;
        var autoplay = false;
    }


</script>
<script src="/dev/views/cxy/js/xiaobofang/player.js"></script>
<script>

    function bgChange() {
        var lis = $('.lib');
        for (var i = 0; i < lis.length; i += 2)
            lis[i].style.background = 'rgba(246, 246, 246, 0.7)';
    }

    window.onload = bgChange;
</script>
<script>
    $(function () {
        $("#app").load('/dev/views/slx/nav.html');
    })
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        // console.log(121);
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("topbtn").style.display = "block";
        } else {
            document.getElementById("topbtn").style.display = "none";
        }
    }

    // 点击按钮，返回顶部
    function topf() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
<script>
    var title = document.getElementById("search");
    // title.value=decodeURI(location.search.match(new RegExp("[\?\&]title=([^\&]+)", "i"))[1]);
    title.value = localStorage.getItem("title")
    var titles = title.value;
    // console.log(title)
    console.log(titles)

    function search1() {
        // let titles=  document.getElementById("songTitle_input").value;
        //1. 获取文本框输入的数据
        let titles = $("#search").val();


        console.log(titles);
        $.ajax({
            type: 'get',
            url: `/dev/song/search/${titles}/1/10`,
            success: function (result) {
                if (result.code == 200) {
                    loadData4(result.data.list, titles)
                }
            }
        })
    }


    $(function () {
        let titles = $("#search").val();
        // if (titles!=null) {
        $.ajax({
            type: 'get',
            url: `/dev/song/select`,
            success: function (result) {
                if (result.code == 200) {
                    var arr = result.data
                    console.log(arr)
                    // console.log(arr[0].id)

                    loadData4(arr)
                }
            }
        })
        // }

        layui.use(function () {
            console.log("进入分页")
            var laypage = layui.laypage;
            $.get(`/dev/song/search/${titles}/1/10`, function (result) {
                loadData4(result.data.list)
                console.log(result.data)
                console.log(result.data.list)
                console.log("====================")
                laypage.render({
                    elem: 'demo-laypage-all',
                    count: `${result.data.total}`, // 数据总数
                    pageNum: result.data.pages,
                    current: result.data.pageNum,
                    limits: [2, 4, 8, 10],
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                    jump: function (obj) {
                        $.get(`/dev/song/search/${titles}/${obj.curr}/${obj.limit}`, function (result) {
                            console.log("====================")
                            console.log(obj.curr)
                            console.log(obj.limit)
                            console.log(result.data)
                            console.log("=================")
                            console.log("--------------")
                            str = result.data.list
                            console.log("再一次，下一页")
                            loadData4(str)
                        })
                        console.log(obj.curr);
                    }
                });
            })
        });
    })


    //数据的渲染
    function loadData4(arr, title) {
        let s;
        // let str=` <ul class="song">`;
        if (title !== undefined) {
            s = ` 搜索到"${title}",找到<em class="sfc">带"${title}"</em>的内容`;
        } else {
            s = ` 搜索到"${titles}",找到<em class="sfc">带"${titles}"</em>的内容`;
        }
        $("#ss").html(s)
        let str = `<div class="tag">
                <div class="sr">`;
        for (let i = 0; i < arr.length; i++) {
            // console.log(i)
            // console.log(arr[i])
            if (i % 2 != 0) {
                str += `<div class="item f-cb">
                        <div class="td">
                            <div class="hd">
                                <a id="sss" class="ply" title="播放"></a>
                            </div>
                        </div>
                        <div class=" td w0">
                            <div class="sn">
                                <div class="text">
                                    <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${arr[i].id}">
                                        <b title="${arr[i].songTitle}">${arr[i].songTitle}</b>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="td">
                            <div class="opt hshow" style="margin-left: 120px;">
                                <a class="uicn uicn8" href="" title="添加到播放列表"></a>
                                <span class="icn fav" title="收藏"></span>
                                <span class="icn share" title="分享"></span>
                                <span class="icn xz" title="下载"></span>
                            </div>
                        </div>
                        <div class="td w1">
                            <div class="text" style="margin-left: 78px;">
                                <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?singerName=${arr[i].singerName}">${arr[i].singerName}</a>
                            </div>
                        </div>
                    </div>
                    <div class="lyrics" style="height:148px;width:615px;overflow:auto;background:#EEEEEE;">
                        <div id="lrc1" class="fhide" style="text-align: center;">
                            <p>
                                <span class="s-fc7">${arr[i].songTitle}</span> "${arr[i].singerName}"
                            </p>
                            <p style="white-space:pre-wrap;">${arr[i].lyrics}</p>
                        </div>
                </div>`
            } else {

                str += `<div class="item f-cb even">
                        <div class="td">
                            <div class="hd">
                                <a  class="ply" title="播放"></a>
                            </div>
                        </div>
                        <div class=" td w0">
                            <div class="sn">
                                <div class="text">
                                    <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${arr[i].id}">
                                        <b title="${arr[i].songTitle}">${arr[i].songTitle}</b>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="td">
                            <div class="opt hshow" style="margin-left: 120px;">
                                <a class="uicn uicn8" href="" title="添加到播放列表"></a>
                                <span class="icn fav" title="收藏"></span>
                                <span class="icn share" title="分享"></span>
                                <span class="icn xz" title="下载"></span>
                            </div>
                        </div>
                        <div class="td w1">
                            <div class="text" style="margin-left: 78px;">
                                <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?singerName=${arr[i].singerName}">${arr[i].singerName}</a>
                            </div>
                        </div>
                    </div>
                  <div class="lyrics" style="height:148px;width:615px;overflow:auto;background:#EEEEEE; ">
                        <div id="lrc1" class="fhide" style="text-align: center;">
                            <p>
                                <span class="s-fc7">${arr[i].songTitle}</span> "${arr[i].singerName}"
                            </p>
                            <p class="colors" style="white-space:pre-wrap;">${arr[i].lyrics}</p>
                        </div>
                </div>`
            }
        }
        str += `</div></div>`
        $("#l1").html(str)
    }

    // var paragraphs = document.getElementsByTagName("p");
    var paragraphs = document.getElementsByClassName("colors");
    console.log(paragraphs);
    for (var i = 0; i < paragraphs.length; i++) {
        console.log(paragraphs.length);
        var paragraph = paragraphs[i];
        console.log(paragraph)
        var text = paragraph.outerHTML;
        var highlightedText = text.replace(new RegExp(titles, "gi"), '<span style="background-color: yellow;">$&</span>');
        paragraph.outerHTML = highlightedText;
    }

    var aArr = document.querySelectorAll('.zs');
    console.log(aArr)
    // 给每个获取到的元素添加点击事件
    aArr.forEach(function (element) {
        element.addEventListener('click', function () {
            // 移除之前选中的选项卡的激活属性
            var active = document.querySelector(".active");
            console.log(active)

            active.classList.remove("active");

            // 给当前点击的选项卡添加激活属性
            this.classList.add("active");

            // 获取当前点击选项卡对应的内容卡的id
            var name = this.getAttribute("data-cont");
            console.log(name)

            // 隐藏所有类名为'cont'的元素
            var cont = document.querySelectorAll(".cont");
            console.log(cont)
            cont.forEach(function (element) {
                element.style.display = "none";
            });

            // 显示当前点击选项卡对应的内容卡
            var section = document.getElementById(name);
            console.log(section)
            section.style.display = "block";
        });
    });

</script>
<script>
    $(function () {
        $(".playerxiao").load('/dev/views/cxy/views/cemian.html');
    })
</script>
</body>
</html>